<template>
  <div class="page flex-col">
      <div class="box_57 flex-col">
        <div class="text-wrapper_89 flex-col">
          <span class="text_223">湘潭县“见实力”中小企业服务云平台数据看板</span>
        </div>
        <div class="section_52 flex-col">
          <div class="group_142 flex-row">
            <div class="box_98 flex-col">
              <!--left1-->
              <div class="section_34 flex-row">
                <div class="box_3 flex-col"></div>
                <span class="text_1">科技创新领域</span>
              </div>
              <div class="block_3 flex-col">
                <div class="box_99 flex-row justify-between">
                  <div class="text-wrapper_1">
                    <span class="text_2">本年新增</span>
                    <span class="text_3">0</span>
                    <span class="text_4">个</span>
                  </div>
                  <div class="text-wrapper_1">
                    <span class="text_2">本年新增</span>
                    <span class="text_3">0</span>
                    <span class="text_4">个</span>
                  </div>
                  <div class="text-wrapper_1">
                    <span class="text_2">本年新增</span>
                    <span class="text_3">0</span>
                    <span class="text_4">个</span>
                  </div>
                </div>
                <div class="box_100 flex-row justify-between">
                  <div class="section_1 flex-col">
                    <div class="text-wrapper_4">
                      <span class="text_11">0</span>
                      <span class="text_12">个</span>
                    </div>
                    <span class="text_13">科技型中小企业评定</span>
                  </div>
                  <div class="section_1 flex-col">
                    <div class="text-wrapper_4">
                      <span class="text_11">176</span>
                      <span class="text_12">个</span>
                    </div>
                    <span class="text_13">高新技术企业</span>
                  </div>
                  <div class="section_1 flex-col">
                    <div class="text-wrapper_4">
                      <span class="text_11">0</span>
                      <span class="text_12">个</span>
                    </div>
                    <span class="text_13">技术中心</span>
                  </div>
                </div>
              </div>
              <!--left2-->
              <div class="section_34 flex-row" style="margin-top:0.7vw">
                <div class="box_3 flex-col"></div>
                <span class="text_1">数字化转型领域</span>
              </div>
              <div class="block_6 flex-col">
                <div class="box_101 flex-row justify-between">
                  <div class="text-wrapper_7">
                    <span class="text_21">本年新增</span>
                    <span class="text_22">6</span>
                    <span class="text_23">个</span>
                  </div>
                  <div class="text-wrapper_8">
                    <span class="text_21">本年新增</span>
                    <span class="text_22">0</span>
                    <span class="text_23">个</span>
                  </div>
                  <div class="text-wrapper_9">
                    <span class="text_21">本年新增</span>
                    <span class="text_22">0</span>
                    <span class="text_23">个</span>
                  </div>
                </div>
                <div class="box_102 flex-row">
                  <div class="image-text_20 flex-col justify-between">
                    <div class="group_71 flex-col">
                      <div class="text-wrapper_10">
                        <span class="text_30">12</span>
                        <span class="text_31">个</span>
                      </div>
                    </div>
                    <span class="text-group_1">智能制造示范单元</span>
                  </div>
                  <div class="image-text_21 flex-col justify-between">
                    <div class="group_14 flex-col">
                      <div class="text-wrapper_10">
                        <span class="text_30">1</span>
                        <span class="text_31">个</span>
                      </div>
                    </div>
                    <span class="text-group_1">智能制造示范标杆项目</span>
                  </div>
                  <div class="image-text_22 flex-col justify-between">
                    <div class="block_7 flex-col">
                      <div class="text-wrapper_10">
                        <span class="text_30">20</span>
                        <span class="text_31">个</span>
                      </div>
                    </div>
                    <span class="text-group_1">
                      湖南省工业互联网平台
                    </span>
                  </div>
                </div>
              </div>
              <!--left3-->
              <div class="section_34 flex-row" style="margin-top:0.8vw">
                <div class="box_3 flex-col"></div>
                <span class="text_1">专精特新领域</span>
              </div>
              <div class="block_9 flex-col">
                <div class="block_10 flex-col">
                  <div class="box_103 flex-row justify-between">
                    <div class="text-wrapper_13">
                      <span class="text_37">本年新增</span>
                      <span class="text_38">0</span>
                      <span class="text_39">个</span>
                    </div>
                    <div class="text-wrapper_14">
                      <span class="text_40">本年新增</span>
                      <span class="text_41">14</span>
                      <span class="text_42">个</span>
                    </div>
                    <div class="text-wrapper_15">
                      <span class="text_43">本年新增</span>
                      <span class="text_44">0</span>
                      <span class="text_45">个</span>
                    </div>
                  </div>
                  <div class="text-wrapper_92 flex-row">
                    <span class="text_46">创新型中小企业</span>
                    <span class="text_47">湖南省专精特新中小企业</span>
                    <span class="text_48">专精特新小巨人企业</span>
                  </div>
                  <div class="box_104 flex-row justify-between">
                    <div class="text-wrapper_17">
                      <span class="text_49">本年新增</span>
                      <span class="text_50">0</span>
                      <span class="text_51">个</span>
                    </div>
                    <div class="text-wrapper_18">
                      <span class="text_52">本年新增</span>
                      <span class="text_53">2</span>
                      <span class="text_54">个</span>
                    </div>
                    <div class="text-wrapper_19">
                      <span class="text_55">本年新增</span>
                      <span class="text_56">1</span>
                      <span class="text_57">个</span>
                    </div>
                  </div>
                  <div class="text-wrapper_93 flex-row justify-between">
                    <span class="text_58">专精特新重点小巨人企业</span>
                    <span class="text_59">国家级制造业单项冠军企业</span>
                    <span class="paragraph_1">湖南省制造业单项冠军企业</span>
                  </div>
                  <div class="box_105 flex-row">
                    <div class="block_40 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_60">0</span>
                        <span class="text_61">个</span>
                      </div>
                    </div>
                    <div class="group_25 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_62">62</span>
                        <span class="text_63">个</span>
                      </div>
                    </div>
                    <div class="group_26 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_64">5</span>
                        <span class="text_65">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="box_106 flex-row">
                    <div class="block_11 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_66">1</span>
                        <span class="text_67">个</span>
                      </div>
                    </div>
                    <div class="block_12 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_68">3</span>
                        <span class="text_69">个</span>
                      </div>
                    </div>
                    <div class="block_13 flex-col">
                      <div class="text-wrapper_21">
                        <span class="text_70">1</span>
                        <span class="text_71">个</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <!--map-->
            <div class="box_107 flex-col">
              <div class="box_60 flex-col">
                <div class="block_41 flex-col">
                  <div class="box_14 flex-col">
                    <div class="box_108 flex-row justify-between">
                        <!--杨嘉桥镇-->
                      <div class="text-wrapper_28">
                        <span class="text_75">企业</span>
                        <span class="text_76">21</span>
                        <span class="text_77">家</span>
                      </div>
                        <!--河口镇-->
                      <div class="text-wrapper_29">
                        <span class="text_78">企业</span>
                        <span class="text_79">19</span>
                        <span class="text_80">家</span>
                      </div>
                    </div>
                    <div class="box_109 flex-row justify-between">
                        <!--石潭镇-->
                      <div class="text-wrapper_30">
                        <span class="text_81">企业</span>
                        <span class="text_82">7</span>
                        <span class="text_83">家</span>
                      </div>
                        <!--射埠镇-->
                      <div class="text-wrapper_31">
                        <span class="text_84">企业</span>
                        <span class="text_85">9</span>
                        <span class="text_86">家</span>
                      </div>
                    </div>
                    <div class="box_110 flex-row">
                        <!--易俗河镇-->
                      <div class="text-wrapper_32">
                        <span class="text_87">企业</span>
                        <span class="text_88">200</span>
                        <span class="text_89">家</span>
                      </div>
                    </div>
                    <div class="box_111 flex-row">
                        <!--乌石镇-->
                      <div class="text-wrapper_33">
                        <span class="text_90">企业</span>
                        <span class="text_91">2</span>
                        <span class="text_92">家</span>
                      </div>
                    </div>
                    <div class="box_111 flex-row">
                      <!--锦石乡-->
                      <div class="text-wrapper_33">
                        <span class="text_90">企业</span>
                        <span class="text_91">3</span>
                        <span class="text_92">家</span>
                      </div>
                    </div>
                    <div class="box_111 flex-row">
                      <!--排头乡-->
                      <div class="text-wrapper_33">
                        <span class="text_90">企业</span>
                        <span class="text_91">9</span>
                        <span class="text_92">家</span>
                      </div>
                    </div>
                    <div class="box_112 flex-row">
                        <!--谭家山镇-->
                      <div class="text-wrapper_34">
                        <span class="text_93">企业</span>
                        <span class="text_94">9</span>
                        <span class="text_95">家</span>
                      </div>
                    </div>
                    <div class="box_113 flex-row justify-between">
                        <!--分水乡-->
                      <div class="text-wrapper_35">
                        <span class="text_96">企业</span>
                        <span class="text_97">1</span>
                        <span class="text_98">家</span>
                      </div>
                        <!--中路铺镇-->
                      <div class="text-wrapper_36">
                        <span class="text_99">企业</span>
                        <span class="text_100">7</span>
                        <span class="text_101">家</span>
                      </div>
                    </div>
                    <div class="box_114 flex-row">
                        <!--白石镇-->
                      <div class="text-wrapper_37">
                        <span class="text_102">企业</span>
                        <span class="text_103">3</span>
                        <span class="text_104">家</span>
                      </div>
                    </div>
                    <div class="box_115 flex-row">
                        <!--茶恩寺镇-->
                      <div class="text-wrapper_38">
                        <span class="text_105">企业</span>
                        <span class="text_106">4</span>
                        <span class="text_107">家</span>
                      </div>
                    </div>
                    <div class="box_sg flex-row">
                      <!--石鼓镇-->
                      <div class="text-wrapper_39">
                        <span class="text_108">企业</span>
                        <span class="text_109">4</span>
                        <span class="text_110">家</span>
                      </div>
                    </div>
                    <div class="box_116 flex-row">
                        <!--青山桥镇-->
                      <div class="text-wrapper_39">
                        <span class="text_108">企业</span>
                        <span class="text_109">17</span>
                        <span class="text_110">家</span>
                      </div>
                    </div>
                    <div class="box_117 flex-row">
                        <!--花石镇-->
                      <div class="text-wrapper_40">
                        <span class="text_111">企业</span>
                        <span class="text_112">20</span>
                        <span class="text_113">家</span>
                      </div>
                    </div>
                  </div>
                    <!--云湖桥镇-->
                  <div class="text-wrapper_27">
                    <span class="text_72">企业</span>
                    <span class="text_73">24</span>
                    <span class="text_74">家</span>
                  </div>
                </div>
              </div>
              <div class="group_143 flex-row">
                <div class="box_16 flex-col"></div>
                <span class="text_123">服务类型</span>
              </div>
              <div class="section_22 flex-col">
                <div class="box_118 flex-row justify-between">
                  <img  class="thumbnail_4"  referrerpolicy="no-referrer"  src="./img/lx_titlebg2.png" />
                  <span class="paragraph_2">体系认证</span>
                </div>
                <div class="box_119 flex-row">
                  <div class="block_42 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">质量体系</span>
                      <div class="text-wrapper_45">
                        <span class="text_125">2</span>
                        <span class="text_126">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon01.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">0</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_34 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">两化融合</span>
                      <div class="text-wrapper_47">
                        <span class="text_131">3</span>
                        <span class="text_132">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon01.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">3</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_35 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">创新管理</span>
                      <div class="text-wrapper_49">
                        <span class="text_137">2</span>
                        <span class="text_138">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon01.png" />
                      <div class="text-wrapper_46">
                        <span class="text_139">新增</span>
                        <span class="text_140">2</span>
                        <span class="text_141">个</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="box_118 flex-row justify-between">
                  <img  class="thumbnail_4"  referrerpolicy="no-referrer"  src="./img/lx_titlebg2.png" />
                  <span class="paragraph_2">知识产传</span>
                </div>
                <div class="box_119 flex-row">
                  <div class="block_42 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">发明专利</span>
                      <div class="text-wrapper_45">
                        <span class="text_125">0</span>
                        <span class="text_126">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon02.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">0</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_34 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">实用新型</span>
                      <div class="text-wrapper_47">
                        <span class="text_131">1</span>
                        <span class="text_132">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon02.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">1</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_35 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">外观专利</span>
                      <div class="text-wrapper_49">
                        <span class="text_137">0</span>
                        <span class="text_138">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon02.png" />
                      <div class="text-wrapper_46">
                        <span class="text_139">新增</span>
                        <span class="text_140">0</span>
                        <span class="text_141">个</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="box_118 flex-row justify-between">
                  <img  class="thumbnail_4"  referrerpolicy="no-referrer"  src="./img/lx_titlebg2.png" />
                  <span class="paragraph_2">信息技术</span>
                </div>
                <div class="box_119 flex-row">
                  <div class="block_42 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">ERP</span>
                      <div class="text-wrapper_45">
                        <span class="text_125">0</span>
                        <span class="text_126">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon03.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">0</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_34 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">MES</span>
                      <div class="text-wrapper_47">
                        <span class="text_131">0</span>
                        <span class="text_132">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon03.png" />
                      <div class="text-wrapper_46">
                        <span class="text_127">新增</span>
                        <span class="text_128">0</span>
                        <span class="text_129">个</span>
                      </div>
                    </div>
                  </div>
                  <div class="group_35 flex-row">
                    <div class="block_79 flex-col justify-between">
                      <span class="text_124">PLM/工业互联网平台</span>
                      <div class="text-wrapper_49">
                        <span class="text_137">0</span>
                        <span class="text_138">个</span>
                      </div>
                    </div>
                    <div class="block_80 flex-col justify-between">
                      <img class="image_10" referrerpolicy="no-referrer" src="./img/lx_icon03.png" />
                      <div class="text-wrapper_46">
                        <span class="text_139">新增</span>
                        <span class="text_140">0</span>
                        <span class="text_141">个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--map-end-->
            <div class="box_130 flex-col">
              <!--right1-->
              <div class="box_131 flex-row">
                <img
                  class="thumbnail_5"
                  referrerpolicy="no-referrer"
                  src="./img/98305e377745e1a0f483917ce1352396.png"
                />
                <span class="text_178">服务机构/专家</span>
              </div>
              <div class="box_32 flex-row">
                <div class="image_37">
                  <div id="jg-canvas" style="height:100%;"></div>
                </div>

                 <div class="image_38">
                     <div id="zj-canvas" style="height:100%;"></div>
                 </div>
              </div>
              <!--right2-->
              <div class="box_132 flex-row">
                <div class="group_45 flex-col"></div>
                <span class="text_179">政策直播</span>
                <div class="image-text_23 flex-row justify-between">
                  <a href="https://www.douyin.com/search/96871?aid=ce2d352d-d983-4120-9415-5896da3ca26e&type=general" target="_blank" style="display: flex">
                  <img
                    class="image_35"
                    referrerpolicy="no-referrer"
                    src="./img/4b9e6682a2a45d4c16ffd7ea8aa5e55d.png"
                  />
                  <span class="text-group_4">直播</span></a>
                </div>
              </div>
              <div class="box_27 flex-col">
                <div id="zb-canvas" style="height: 100%"></div>
              </div>
              <!--right3-->
              <div class="box_133 flex-row">
                <div class="box_29 flex-col"></div>
                <span class="text_199">服务情况</span>
              </div>
              <div class="box_30 flex-col">
                <div class="block_47 flex-col">
                  <div id="qk-canvas" style="height: 100%"></div>
                </div>
              </div>
            </div>
          </div>
          <!--zongshu-->
          <div class="group_104 flex-col">
            <div class="text-wrapper_41">
              <span class="text_114">510</span>
              <span class="text_115">家</span>
            </div>
            <span class="text_116">企业总数</span>
          </div>
          <div class="group_105 flex-col">
            <div class="text-wrapper_41">
              <span class="text_114">12</span>
              <span class="text_115">家</span>
            </div>
            <span class="text_116">机构总数</span>
          </div>
          <div class="group_106 flex-col">
            <div class="text-wrapper_41">
              <span class="text_114">18</span>
              <span class="text_115">家</span>
            </div>
            <span class="text_116">专家总数</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import './utils/flexible'

export default {
  name: 'BigScreen',
  data() {
    return {
      charts: {
        zb: null,
        qk: null,
        jg: null,
        zj: null,
        map: null
      }
    }
  },
  mounted() {
    this.initCharts()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    initCharts() {
      // 初始化服务机构图表
      this.charts.jg = echarts.init(document.getElementById('jg-canvas'), 'dark')
      const jgOption = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '服务机构',
          type: 'pie',
          radius: [10, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          data: [
            { value: 1, name: '管理咨询\n1家' },
            { value: 1, name: '信息服务\n1家' },
            { value: 1, name: '法律服务\n1家' },
            { value: 2, name: '创业服务\n2家' },
            { value: 4, name: '融资担保\n4家' },
            { value: 3, name: '技术创新\n3家' },
            { value: 0, name: '人才培训\n0家' },
            { value: 0, name: '市场开拓\n0家' }
          ],
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: '#fff',
                fontFamily: 'MicrosoftYaHei'
              }
            }
          }
        }]
      }
      this.charts.jg.setOption(jgOption)

      // 初始化服务专家图表
      this.charts.zj = echarts.init(document.getElementById('zj-canvas'), 'dark')
      const zjOption = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '服务专家情况',
          type: 'pie',
          radius: '40%',
          data: [
            { name: '培训类\n12家', value: 12 },
            { name: '咨询类\n5家', value: 5 },
            { name: '认证类\n1家', value: 1 }
          ],
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: '#fff',
                fontFamily: 'MicrosoftYaHei'
              }
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.charts.zj.setOption(zjOption)

      // 初始化政策直播图表
      this.charts.zb = echarts.init(document.getElementById('zb-canvas'), 'dark')
      const zbOption = {
        color: ['#106ECE'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '政策直播',
          type: 'bar',
          barWidth: '60%',
          data: [0, 0, 0, 0, 0, 0, 5, 7, 0, 0, 8, 4]
        }]
      }
      this.charts.zb.setOption(zbOption)

      // 初始化服务情况图表
      this.charts.qk = echarts.init(document.getElementById('qk-canvas'), 'dark')
      const qkOption = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '培训活动', '问卷调查', '政策发布'],
            ['1月', 0, 0, 14],
            ['2月', 0, 0, 14],
            ['3月', 2, 2, 10],
            ['4月', 1, 1, 15],
            ['5月', 1, 1, 13],
            ['6月', 0, 0, 26],
            ['7月', 3, 3, 17],
            ['8月', 1, 1, 20],
            ['9月', 2, 2, 3],
            ['10月', 1, 1, 12],
            ['11月', 2, 2, 17],
            ['12月', 1, 1, 14]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      this.charts.qk.setOption(qkOption)
    },

    handleResize() {
      Object.values(this.charts).forEach(chart => {
        if (chart) {
          chart.resize()
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './styles/common.css';
@import './styles/index.response.css';

</style> 